本文共 8983 字，大约阅读时间需要 29 分钟。

目录

 

---

什么是 AngularJS

• 一款非常优秀的前端高级 JS 框架
• 最早由 Misko Hevery 等人创建
• 2009 年被 Google 公式收购，用于其多款产品
• 目前有一个全职的开发团队继续开发和维护这个库
• 有了这一类框架就可以轻松构建 SPA 应用程序
• 轻松构建 SPA（单一页面应用程序）
• 单一页面应用程序：
  • 只有一个页面（整个应用的一个载体）
  • 内容全部是由AJAX方式呈现出啦的
• 其核心就是通过指令扩展了 HTML，通过表达式绑定数据到 HTML。

为什么使用 AngularJS

• 更少的代码，实现更强劲的功能
• 将一些以前在后台开发中使用的思想带入前端开发
• 带领当前市面上的框架走向模式化或者架构化

以前我们是这样的：

以后将会是这样的：

传统方式实现加法运算

Angular实现加法运算

传统方式实现数据列表呈现

Angular实现数据列表呈现

AngularJS 的核心特性

• MVC
• 模块化
• 自动化双向数据绑定
• 指令系统

相关链接

• http://www.apjs.net/
• http://www.angularjs.cn/
• http://docs.angularjs.cn/api
• https://material.angularjs.org
• http://angular-ui.github.io/

Angular 上手

安装 Angular

• 下载 Angular.js 的包
  • https://github.com/angular/angular.js/releases
• 使用 CDN 上的 Angular.js
  • http://apps.bdimg.com/libs/angular.js/1.4.9/angular.min.js
• 使用 Bower 安装 bash bower install angular
• 使用 NPM 安装 bash npm install angular
• 每种方式安装包，本质都是将angular的库下载到当前文件夹中

简单示例

Hello world

  
       
   
    
    
在输入框中尝试输入：
    
    
姓名：          
    
    
{
  {name}}
  
   
  

案例解析

• 当网页加载完毕，AngularJS 自动开始执行；
• HTML 页面中 ng-xxx 的属性称之为指令（Directive）；
• ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序管理的边界；
• ng-model 指令把文本框的值绑定到变量 name 上；
• {
  { name }} 表达式就是把应用程序变量 name 绑定到某个段落的 innerHTML。

使用总结

• Angular 最大程度的减少了页面上的 DOM 操作；
• 让 JavaScript 中专注业务逻辑的代码；
• 通过简单的指令结合页面结构与逻辑数据；
• 通过自定义指令实现组件化编程；
• 代码结构更合理；
• 维护成本更低；
• Angular 解放了传统 JavaScript 中频繁的 DOM 操作

  
     
     
   
    
    
使用NG实现双边数据绑定
    
        
    
hello {
  {user.name}}
  
   
  

 

Angular 基础概念

MVC 思想

什么是 MVC 思想

• MVC 是一种应用程序的开发思想，不是设计模式
• 主要目的是为了解决应用程序展示结构，业务逻辑之间的紧耦合关系
• 使应用程序的组成分为三个部件，每个部件有自己明确的职责，相互之间没有依赖
• 将应用程序的组成划分为三个部分：Model View Controller
• 控制器的作用就是初始化模型用的；
• 模型就是用于存储数据的

• 视图用于展现数据

模型

• AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分

// 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块var myApp = angular.module("MyApp", []);

• 也可以将重复使用的指令或过滤器之类的做成模块便于复用
• 注意必须指定第二个参数，否则变成找到已经定义的模块

  
       
   
    
    
使用NG实现双边数据绑定
    
        
    
hello {
  {user.name}}
    
      
   
    

控制器

• 调度逻辑的集合

angular.module('OneApp', [])    .controller('HelloController', [        '$scope',        function($scope) {            $scope.p = {                name: 'zhangsan'            };        }    ]);

• 控制器的三种主要职责：

1. –为应用中的模型设置初始状态
2. –通过$scope对象把数据模型或函数行为暴露给视图
3. –监视模型的变化，做出相应的动作

// 监视购物车内容变化，计算最新结果$scope.$watch(‘totalCart’, calculateDiscount);

  
     
   
        
     
            
用户名
            
              
         
         
            
密码
            
              
         
         
            
            
              
         
         
            
            
{
  {message}}
         
      
   
    

 

视图模型（$scope）

• 视图和控制器之间的桥梁
• 用于在视图和控制器之间传递数据
• 利用$scope暴露数据模型（数据，行为）

表达式（Expression）

• 作用：

1. –使用 表达式 把数据绑定到 HTML。

• 语法：

1. –表达式写在双大括号内：{
   { expression }}。

• 比较：

1. –表达式作用类似于ng-bind指令
2. –建议更多的使用指令

• AngularJS表达式很像JavaScript表达式
• 它们可以包含文字、运算符和变量
• 如 {
  { 5 + 5 }} 或 {
  { firstName + ‘-’ + lastName }}
• 数字  {
  { 100 + 100 }}
• 字符串  {
  { 'hello' + 'angular' }}
• 对象  {
  { zhangsan.name }}
• 数组  {
  { students[10] }}

  
         {
  { true ? 'true':'false' }}  

对比 JavaScript 表达式

• 相同点：

1. –AngularJS 表达式可以包含字母，操作符，变量。

• 不同点：

1. –AngularJS 表达式可以写在 HTML 中。
2. –AngularJS 表达式不支持条件判断，循环及异常。
3. –AngularJS 表达式支持过滤器。

单向数据绑定

•模型变化过后，自动同步到界面上；

•一般纯展示型的数据会用到单项数据绑定；

•使用表达式的方式都是单向的

双向数据绑定

•两个方向的数据自动同步：

•模型发生变化自动同步到视图上；

•视图上的数据发生变化过后自动同步到模型上；

Angular 指令系统（Directive）

• AngularJS 有一套完整的、可扩展的、用来帮助 Web 应用开发的指令集
• 在 DOM 编译期间，和 HTML 关联着的指令会被检测到，并且被执行
• 在 AngularJS 中将前缀为 ng- 这种属性称之为指令，其作用就是为 DOM 元素调用方法、定义行为绑定数据等
• 简单说：当一个 Angular 应用启动，Angular 就会遍历 DOM 树来解析 HTML，根据指令不同，完成不同操作

指令属性小提示

• HTML5 允许扩展的（自制的）属性，以 data- 开头。
• AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
• 二者效果相同。

ng-app 指令

• ng-app指令用来标明一个AngularJS应用程序
• 标记在一个AngularJS的作用范围的根对象上
• 系统执行时会自动的执行根对象范围内的其他指令
• 可以在同一个页面创建多个ng-app节点

 

ng-bind指令

ng-bind-html指令

ng-repeat 指令

• ng-repeat指令用来编译一个数组重复创建当前元素，如

   
    
    
        {
  {item}}    
   

 

  
     
   
  
      
    
    {
  {$first?'开始':''}}    {
  {item.name}}            {
  {item.age}}    {
  {$last?'没有了':''}}  
   
    

ng-class 指令

• ng-class指令可以设置一个键值对，用于决定是否添加一个特定的类名，键为class名，值为bool类型表示是否添加该类名

   
    
    
        {
  {item.content}}    
   

 

  
         
   
    
        
        
    
      {
  {item.name}}           {
  {item.age}}    
  
   
    

  
             红色    绿色    
     
   
  

 

  
           
   
    
    
{
  {name}}
  
   
    

ng-show/ng-hide 指令

• ng-show/ng-hide指令会根据属性值去确定是否展示当前元素，例如ng-show=false则不会展示该元素

   
    
    
        {
  {item.content}}    
   

  
         
   
        aaaaaaaaaaaaaa  
   
  
     
   
        loading...  
   
    

 

 ng-cloak指令

  
       
       {
  {'hello angular'}}

• ng-if是指是否存在DOM元素

ng-link/ng-src 指令

• ng-link/ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG，如

  
           跳转到图片

 ng-switch指令

  
           1    2    3    
   
    
    
           你选择的是1    
    
    
    
           你选择的是2    
    
    
    
           你选择的是3    
    
    
    
           你什么都没选    
    
  
   
  

其他常用指令

• ng-model
• ng-class
• ng-show/ng-hide/ng-if
• ng-click
• ng-link/ng-src

  
       
    全选/取消全选
  
   
    
        
    
选项01          
    
    
选项02          
    
    
选项03          
    
    
选项04          
    
    
选项05          
  
   
  

自定义指令

• AngularJS中可以通过代码自定义指令：

myModule.directive('hello', function() {    return {        restrict: 'E',        template: '
Hello world
',        replace: true    };});myApp.directive("ngHover", function() {    return function(scope, element, attrs) {        element.bind("mouseenter", function() {            element.css("background", "yellow");        });        element.bind("mouseleave", function() {            element.css("background", "none");        });    }});

todomvc-app-template案例

			
   		
   				
   		
   		
   				
   
			
    
				
     
todos
				
     
					
      				
     
			
    
			
    
				
     				
     Mark all as complete				
     
					
      
						
       
							
        							
        { {todo.text}}							
        						
       
						
       
							
        						
       
					
				
     
			
    
			
    			
    		
   
		
   		
   					

<--!app.js-->(function(angular) {  'use strict';  /**   * MyTodoMvc Module   *   * 应用程序的主要的模块   */  var myApp = angular.module('MyTodoMvc', []);  // 注册一个主要的控制器  myApp.controller('MainController', ['$scope', function($scope) {    // [1,2,3,4,5]    function getId() {      var id = Math.random(); // 1 2      for (var i = 0; i < $scope.todos.length; i++) {        if ($scope.todos[i].id === id) {          id = getId();          break;        }      }      return id;    }    // 文本框需要一个模型    $scope.text = '';    // 任务列表也需要一个    // 每一个任务的结构 { id: 1, text: '学习', completed: true }    $scope.todos = [{      id: 0.123,      text: '学习',      completed: false    }, {      id: 0.22,      text: '睡觉',      completed: false    }, {      id: 0.232,      text: '打豆豆',      completed: true    }, ];    // 添加todo    $scope.add = function() {    	if(!$scope.text){    		return;    	}      $scope.todos.push({        // 自动增长？        id: getId(),        // 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入        text: $scope.text,        completed: false      });      // 清空文本框      $scope.text = '';    };    // 处理删除    $scope.remove = function(id) {      // 删除谁      for (var i = 0; i < $scope.todos.length; i++) {        if ($scope.todos[i].id === id) {          $scope.todos.splice(i, 1);          break;        }      }      // $scope.todos    };    // 清空已完成    $scope.clear = function() {      var result = [];      for (var i = 0; i < $scope.todos.length; i++) {        if (!$scope.todos[i].completed) {          result.push($scope.todos[i]);        }      }      $scope.todos = result;    };    // 是否有已经完成的    $scope.existCompleted = function() {      // 该函数一定要有返回值      for (var i = 0; i < $scope.todos.length; i++) {        if ($scope.todos[i].completed) {          return true;        }      }      return false;    };    // 当前编辑哪个元素    $scope.currentEditingId = -1;    $scope.editing = function(id) {      $scope.currentEditingId = id;    };    $scope.save = function() {      $scope.currentEditingId = -1;    };    // $scope.checkall = false;    // $scope.$watch('checkall', function(now, old) {    //   for (var i = 0; i < $scope.todos.length; i++) {    //     $scope.todos[i].completed = now;    //   }    // });    var now = true;    $scope.toggleAll = function() {      for (var i = 0; i < $scope.todos.length; i++) {        $scope.todos[i].completed = now;      }      now = !now;    }  }]);})(angular);